import React, { useCallback } from 'react'
import { View } from '@tarojs/components'
import UserAvatar from './UserAvatar'
import UserName from './UserName'
import UserDesc from './UserDesc'
import './UserCard.scss'

export default function UserCard({
  data = {}, language, onClick, highlight
}) {
  const { pId, PracticeInfoId } = data
  const onClickUser = useCallback(() => {
    onClick?.(pId || PracticeInfoId)
  }, [pId, PracticeInfoId, onClick])
  return (
    <View className="common-user-card" onClick={onClickUser}>
      <UserAvatar data={data} />
      <View className="user-info">
        <UserName data={data} language={language} highlight={highlight} />
        <UserDesc data={data} language={language} oneLine highlight={highlight} />
      </View>
    </View>
  )
}
